import React, { PureComponent } from 'react'
import { Table, Alert, Switch, notification, Icon } from 'antd'
import styles from './List.less'
// eslint-disable-next-line no-unused-vars
// import { getValue } from '@/utils/utils'

export default class List extends PureComponent {
  // 行选事件
  handleSelectRows = rows => {
    const { dispatch } = this.props
    dispatch({
      type: 'parameters/updateState',
      payload: { selectedRowKeys: rows },
    })
  }

  // 编辑
  handleEditClick = record => {
    if (record.id) {
      this.props.dispatch({
        type: 'parameters/edit',
        payload: {
          modalType: 'edit',
          id: record.id,
        },
      })
    } else {
      notification.error('没有选择记录')
    }
  }

  // 启用/停用
  handleEnable = (record, checked) => {
    if (!record.id) {
      notification.error('没有选择记录')
      return
    }
    this.props.dispatch({
      type: 'parameters/changeStatus',
      payload: {
        id: record.id,
        status: checked ? '0002' : '0003',
        record,
      },
    })
  }

  render() {
    const { list, pagination, selectedRowKeys, loading } = this.props
    const columns = [
      {
        title: '平台名称',
        align: 'center',
        dataIndex: 'platformName',
        width: 100,
        sorter: true,
      },
      {
        title: '管理员姓名',
        align: 'center',
        dataIndex: 'adminName',
        width: 80,
        sorter: true,
      },
      {
        title: '客服支持电话',
        align: 'center',
        dataIndex: 'telephone',
        width: 100,
      },
      {
        title: '客服支持微信',
        align: 'center',
        width: 100,
        dataIndex: 'wechat',
      },
      {
        title: '版权信息',
        align: 'center',
        width: 100,
        dataIndex: 'copyrightInformation',
      },
      {
        title: '状态',
        align: 'center',
        width: 80,
        dataIndex: 'status',
        render: (text, record) => (
          <Switch
            onChange={checked => this.handleEnable(record, checked)}
            checkedChildren={<Icon type="check" />}
            unCheckedChildren={<Icon type="close" />}
            checked={text === '0002'}
          />
        ),
      },
      {
        title: '更新时间',
        align: 'center',
        width: 100,
        dataIndex: 'gmtModify',
      },
      {
        title: '操作',
        width: 80,
        align: 'center',
        render: (text, record) => (
          <div>
            <a onClick={e => this.handleEditClick(record, e)}>编辑</a>
          </div>
        ),
      },
    ]

    const paginationProps = {
      ...pagination,
    }

    const rowSelectionProps = {
      selectedRowKeys,
      onChange: selectedKeys => {
        this.handleSelectRows(selectedKeys)
      },
    }
    return (
      <div className={styles.standardTable}>
        <div className={styles.tableAlert}>
          <Alert
            message={
              <div>
                已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
                <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>
                  清空选择
                </a>
              </div>
            }
            type="info"
            showIcon
          />
        </div>
        <Table
          loading={loading}
          locale={{ emptyText: '暂无数据' }}
          bordered
          dataSource={list}
          rowKey={record => record.id}
          rowSelection={rowSelectionProps}
          rowClassName={record => (record.locked === '0002' ? styles.disabled : styles.enabled)}
          pagination={paginationProps}
          columns={columns}
          onChange={this.handleListChange}
        />
      </div>
    )
  }
}
